*{margin: 0 ;padding: 0;}
body{font-size:0.8rem;background-color: #fff;}
ul{list-style-type: none;}
a{text-decoration:none;color:#c1c1c1 ;}
a:hover{text-decoration:none !important;}
.centre{width:100%;}
.centres{width:90%;margin:10px auto;}
.cent{width: 80%; margin:20px auto;}
.flex{display: flex;justify-content:space-between;align-items:center;flex-wrap: wrap;}
.flexs{display: flex;justify-content: space-around;}
// 头部 
.renovation-hearder{
  // tou-top
  .main-top{
    display: flex;justify-content: end;
    li{
     border-right: 1px solid #c1c1c1;
      padding: 0 10px;
      box-sizing: border-box;
     &:last-child{border-right: 0;}
     a{color:#c1c1c1 ;}
    }
    @media (max-width:1024px ) {
      // display: none;
    }
  }
  // tou-bottom
  .main-bottom{
    .logo{
      img{
        display: block;
        min-width: 120px;
      }
    }
    // 导航
    .main-nav{
      display: flex;justify-content: space-between;flex-wrap: wrap;
      justify-content: center;
      li{
        padding:0 20px;
        box-sizing: border-box;
        .active{border-bottom: 2px solid #000;color: #000;}
        a{
          color: #000;
          line-height: 45px;
          margin-top: 10px;
        }
        a:hover{border-bottom: 2px solid #000;color: #000;}
      }
    }
    // 搜索
    .main-search{
      background-color: #f4f5f9;border-radius: 5px;padding:10px;box-sizing: border-box;display: flex;
      .bule{
        color:#2357cd;
        border-right: 1px solid #c1c1c1;
        padding: 0 5px 0 0;
        box-sizing: border-box;
      }
      input{border: 0;background:url(../img/search.png) no-repeat right #f4f5f9;padding:0  5px ;box-sizing: border-box;background-size:20px;}
    }
    
  }
}
// 轮播图
.swiper{
  img{display: block;width: 100%;}
}
// 内容
.container-list{
    border-bottom: 1px solid #ccc;
    box-sizing: border-box;
    justify-content: space-around;
  .main-list{
    img{display: block;width:60%;margin: 20px auto;}
  }
}
.container-company{
  
  .company-title{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    .tit-left{
      h3{font-weight: 600;}
      span{line-height: 30px; display: inline-block;margin-right: 5px; background-color: #ccc;width: 30px;text-align: center;}
    }
  }
  
}
.company-content{
  
  margin: 15px 0;
  .myswiper{
    width: 100%;
    .swiper-wrapper{width: 100%;}
    .swiper-slide{width:20%;}
  } 
  .far{border-radius:10px;
    
   .fater{
      position: relative;
      .img img{display:block;width: 100%; border-radius: 10px 10px 0 0;}
      .posi{position:absolute;bottom: 10px;left: 15px;}
    }
    .written{
      padding: 10px;
      box-sizing: border-box;
      h4{font-weight: 550;}
      .written-an{display: flex; 
        .anli{margin-right: 30px; 
          span{color: red;}
          &:last-child{margin-right: 0;}
        }
      }
      .written-order{border: 1px solid #7c7ae7; color: #7c7ae7;border-radius: 10px;width:38%;margin-top:5px;}
    }
    &:hover{transform: scale(1.01,1.01);box-shadow: 1px 1px 10px #ccc;}
  }
  
}
// 精美效果图
.container-exquisite{
  .exquisite-nav{display: flex;
    li{padding-right:15px ;box-sizing: border-box;
      &:last-child{padding-right: 0;}
      a{color: #000;
        &:hover{color: #2357cd;}
      }
      .actives{color: #2357cd;}
    }
  }
  //内容
  .exquisite-content{
    display: flex;
    justify-content: space-between;
    position: relative;
    .cont-one{width: 50%;
      .swiperi{width: 100%;}
      .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal{bottom:30px;
        left:10px;
        width: 100%;
      }
      .swiper-pagination {text-align:left; }

      .far{
        border-radius: 10px;
        .fater{
          position: relative;
          .img img{border-radius: 10px 10px 0 0;display: block;width: 100%;}
          .posi{position:absolute;top:1px;left:10px;
          }
        }
        .written{
          border: 1px solid #ccc ;
          border-radius:0 0 10px 10px;
          padding:10px 10px 20px 10px;
          box-sizing: border-box;
          // border-top: 0;
          h4{color: #000;font-size: 1.5rem;}
          p{font-size: 0.7rem;color: #ccc;}
          
        }
      }
    }
    .cont-two{
      width: 24%;
      height: 100%;

      position: relative;
      .phon{
        img{display: block;width: 100%;border-radius: 10px;height: 100%;}
      }
      .gay{position: absolute;background-color: rgba($color:#4d3d30, $alpha:0.7); color: #fff;bottom: 20px;left: 0;line-height: 30px;width: 100%;text-align: center;}
    }
    
  }


}
// 学习装修知识
.container-knowledge{
  .more{border: 1px solid #2357cd; color: #2357cd;border-radius: 10px;}
  .knowledge-content{
    display: flex;
    justify-content: space-between;
    margin: 10px 0;
    .know-wiki{width: 24%;
     
      .wiki-photo{
        width: 100%;
        position: relative;
        .pho img{display: block;width: 100%;border-radius: 10px 10px  0  0;}
        .gays{display: none; width: 100%;height:100%;background-color:rgba($color: #9e9e9c, $alpha:0.3);z-index: 10;position: absolute;left: 0;bottom: 0;color: #fff;text-align: center;font-size: 2.5rem;font-weight: normal;line-height:22rem; border-radius: 10px 10px 0 0;}
        &:hover{.gays{display: block;} }
      }
      .wiki-introduce{
        width: 100%;
        padding: 10px;
        box-sizing: border-box;
        border: 1px solid #ccc;
        border-radius:0 0 10px 10px;
        .introduce-top{
          display: flex;
          justify-content: space-between;
          margin-bottom: 5px;
          &:last-child{margin-bottom: 0;}
          .top-zp{
            width: 30%;
            img{display: block;width: 100%;}
          }
          .top-wenzi{ 
            width:65%;
            .tit{
              color: #000;font-size: 1.2rem;padding: 0;                  white-space:nowrap !important;
              overflow:hidden;
              text-overflow:ellipsis
            }
            p{padding: 0;
              margin: 0;
              color: #7d7d7d;
              font-size: 0.7rem;
              display: -webkit-box;
              overflow: hidden;
              white-space: normal !important;
              text-overflow: ellipsis;
              word-wrap: break-word;
              -webkit-line-clamp: 2; 
              -webkit-box-orient:vertical;
            }
           }
        }
        .introduce-bottom{
          margin: 10px 0;
         li{
            background: url(/img/dash.png)no-repeat left center;
            background-size:15px;
            padding: 0 15px;
           a{font-size: 0.75rem;
            display: block; color: #7d7d7d;white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis}
        
          }
        }
      }
    }
   
  }






}
// 装修问题
.question-content{
  background-color: #f4f5f9;
  border-radius: 10px;
  padding:40px ;
  box-sizing:border-box;
  .ques-one{
    .one-tit{font-size: 1.5rem;color: #000;background: url(/img/34.jpg) no-repeat left center;background-size: 20px;padding-left:30px; box-sizing: border-box;font-weight: 550;}
    p{padding-left: 30px;box-sizing: border-box;line-height: 30px;}
    .one-comment{
      padding-left: 30px ;box-sizing: border-box;
      display: flex;
      margin-bottom: 25px;
     
      .com-left{
        margin-right:30px;
      }
      .com-right{
        span{color: #f00;} 
        img{margin-right: 10px;}


      }
    }
  }
}
// 数字快
.container-number{
  border: 1px solid #ccc;
  padding: 30px;
  box-sizing: border-box;
  border-radius: 10px;
  display: flex;
  justify-content: space-around;
  .num-one{
    text-align: center;
    .num-top{
      color: #fcaf3d;
      font-size: 2.5rem;
      font-weight: 550;
    }
    .num-bottom{color: #000;font-size: 1rem;}
  }
}
// 底部
.renovation-bottom{
  color: #a4a39f;
  font-size: 0.65rem;
  padding: 10px 0;
  box-sizing:border-box;
  background-color: #222222;
  .bottom-top{
    display: flex;
    justify-content: space-between;
    
    .bot-left{
      width: 85%;
      display: flex; 
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
      .about-bot{
        h5{color: #fff; span{color: #fbb03d;}}
        li{
          a{
          color: #a4a39f;
          }
        }
      }

    }
    .bot-right{
      width:10%;
      img{display: block;width: 100%;margin-bottom: 10px;}
      text-align: center;
    }
    
  }
  .bottom-center{
    width: 85%;
    padding: 20px 0;
    color:#a4a39f;
    border-bottom: 1px solid #ccc;
    .cen-top{
      span{color:#fbb03d ;}
    }

  }
  .bottom-bottom{
    width: 100%;
    padding-top: 20px;
    display: flex;
    justify-content:space-between;
    .bot-wen{
      width:75%;
    }
    .bot-img{
      display: flex;
      width:20%;
      justify-content: space-between;
      img{
        display: block;
        width:49%;
        height:30px;
      }
    }

  }







}